<template>
<div class="">
    <div v-for="(item,index) in zxc" :key="index">
        <div class="top">
            <div class="top1">
                <div>{{item.product_name}}</div>
                <ul class="top2">
                    <li>概述</li>
                    <li>参数</li>
                    <li>用户评价</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- //轮播图 -->
    <div class="center">
        <div class="center1">
        <el-carousel indicator-position="outside" height=470px>
            <el-carousel-item  v-for="(item,index) in zxc" :key="index">
                 <img :src="`http://101.132.181.9:3000/${item.product_picture}`" style="width:100%;height:100%">
            </el-carousel-item>
        </el-carousel>
        </div>
        <div class="you" v-for="(item,index) in zxc" :key="index">
                <div class="y1">
                    <div class="y2">{{item.product_name}}</div>
                    <div class="yy">{{item.product_intro}}</div>
                    <div style="color:red" class="yy">{{item.product_name}}</div>
                    <div style="color:red" class="yy">{{item.product_price}}元</div>
                </div>
                <div class="xia">
                    <div class="xia1" v-for="(item,index) in zxc" :key="index">
                        <p>{{item.product_name}}</p>
                        <span class="ss">{{item.product_selling_price}}</span>
                        <p style="color:red">总计：{{item.product_selling_price}}元</p>

                    </div>
                    
                </div>
                 <div class="di">
                        <el-button @click="jia">加入购物车</el-button>
                        <el-button class="button1">喜欢</el-button>
                </div>

                <footer>
                     <ul>
                    <li>
                        <img src="../assets/imgs/111.png" alt="">小米自营
                    </li>
                    <li>
                        <img src="../assets/imgs/111.png" alt="">小米发货
                    </li>
                    <li>
                        <img src="../assets/imgs/111.png" alt="">七天无理由退货
                    </li>
                    <li>
                        <img src="../assets/imgs/111.png" alt="">七天价格保护
                    </li>

                </ul>
                </footer>
    </div>
    </div>
</div>
</template>
<script>
import { xiangqing ,gouwu} from "@/api/api.js";
export default {
  name: "xiangq",
  props: [],
  data() {
    return {
      zxc: [],
      id: ""
    };
  },
  created() {
    //钩子函数实例创建之后
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getList(this.id);
  },
  methods: {
    //方法
    getList(id) {
      xiangqing(id).then(res => {
        console.log(res);
        this.zxc = res.data.Product;
      });
    },
    jia(){
        let user=JSON.parse(localStorage.getItem("user")) 
        console.log(user);
        gouwu({user_id:user.user_id,product_id:this.id}).then(res=>{
            console.log(res);
            if(res.status==200){
               this.$message({
          message: res.data.msg,
          type: 'success'
        });
            }
        })
    }
  },
  components: {
    //注册子组件
  },
  watch: {
    //监听
  }
};
</script>
<style lang="scss" scoped>
.center {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  .center1 {
    width: 700px;
  }
}
.you {
  border-bottom: 1px solid #000;
}
.y2 {
  font-weight: 600;
  font-size: 20px;
}
.yy {
  margin-top: 30px;
  color: #ccc;
}
.xia {
  display: flex;
  width: 700px;
  height: 200px;
  background-color: rgb(253, 252, 252);
}
.xia1 {
  margin-top: 60px;
  .ss {
    margin-left: 420px;
  }
  p {
    margin-top: 40px;
    margin-left: 100px;
  }
}
.di {
  margin-top: 30px;
  button {
    width: 330px;
    background-color: orange;
  }
  .button1 {
    background-color: #ccc;
    border: none;
  }
}
footer {
  margin-top: 15px;
  ul {
    li {
      list-style: none;
      float: left;
      margin: 0 10px;
    }
  }
}
.top {
    width: 100%;
    height: 64px;
    border-bottom: 1px solid #f1f1f1;
    .top1 {
      width: 1070px;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      div {
        line-height: 64px;
      }
      .top2 {
        display: flex;
        line-height: 64px;

        li {
          font-size: 18px;
          color: #c1c1c1;
          list-style: none;
          padding: 0 10px;
          padding-bottom: 20px;
        }
        li:hover {
          color: orange;
        }
      }
    }
  }
</style>